import React, { useEffect, useState } from 'react';
import { Button, Image, Text, View } from '@tarojs/components';
import './index.less';
import { observer } from 'mobx-react-lite';
import classNames from 'classnames';
import Taro from '@tarojs/taro';
//我的活动item
interface MineItemProps {
  dataList: any;
  list?: boolean;
  queryQrCode?: (orderId) => void;
  activityClick: () => void;
  cancelClick?: (id: any) => void;
  deleteClick?: (id: any) => void;
  reviewClick?: (id: any) => void;
}
const MineItem: React.FC<MineItemProps> = ({
  dataList,
  list,
  queryQrCode,
  activityClick,
  cancelClick,
  deleteClick,
  reviewClick
}) => {
  const [clickAble, setClickAble] = useState<boolean>(true); //是否可点击状态
  const gotoDetailClick = (item: any) => {
    if (clickAble) {
      Taro.navigateTo({
        url: `/subPagesActivity/detail/index?activityId=${encodeURIComponent(item.activityId)}&showBtn=false`,
      });
      setClickAble(false);
    }
    setTimeout(() => {
      setClickAble(true);
    }, 1000);
  };

  return (
    <View
      className="home-activity-content"
      style={{ marginTop: list ? '60px' : '0' }}
    >
      {dataList.map((item: any, index: any) => {
        return (
          <View
            className="home-activity-item"
            key={`${item.activityType}-${index}`}
            style={{ borderBottom: list ? '' : '0.5px solid rgba(0,0,0,.1)' }}
          >
            <View
              className="item-left"
              style={{
                background: `url(${item.coverImageUrl})`,
                backgroundSize: 'cover',
              }}
              onClick={() => gotoDetailClick(item)}
            ></View>
            <View
              className="item-right"
              style={{
                flexDirection: 'column',
                background: list ? '#fff' : 'transparent',
              }}
            >
              <View
                className={'join-title clamp1'}
                onClick={() => gotoDetailClick(item)}
              >
                {item.title}
              </View>
              <View
                className="join-position-desc"
                style={{ height: '17px', marginBottom: '6px' }}
                onClick={() => gotoDetailClick(item)}
              >
                活动时间：{item.activityTimes}
              </View>
              <View
                className="join-position"
                onClick={() => gotoDetailClick(item)}
              >
                <View>
                  <Image
                    src={
                      'https://file.linkcook.cn/image/wineMiniProgram/activity/position.png'
                    }
                  />
                </View>

                <View className="join-position-desc clamp2">
                  {item.activityAddress}
                </View>
              </View>
              {item.registrationStatus === 1 && (
                <View className="join-desc" style={{ marginLeft: '0' }}>
                  商家审核通过，请准时参加
                </View>
              )}
              {item.registrationStatus === 2 && (
                <View className="join-desc" style={{ marginLeft: '0' }}>
                  商家审核未通过
                </View>
              )}
              {!list && (
                <View className="join-more-btn">
                  {Number(item.registrationStatus) === 0 &&
                    item.activityLeader === false && (
                      <View className="join-desc" style={{ marginLeft: '0' }}>
                        商家确认中
                      </View>
                    )}

                  {(item.registrationStatus === 1 ||
                    item.registrationStatus === 0) &&
                    item.activityLeader === false && (
                      <View
                        className={classNames(
                          `join-more join-more-${item.registrationStatus}`
                        )}
                        onClick={() => cancelClick(item.orderId)}
                      >
                        <Button className="join-detail">取消报名</Button>
                      </View>
                    )}
                  {item.registrationStatus === 2 && (
                    <View
                      className={classNames(
                        `join-more join-more-${item.registrationStatus}`
                      )}
                      onClick={() => deleteClick(item.orderId)}
                    >
                      <Button className="join-detail">删除报名</Button>
                    </View>
                  )}
                  {item.registrationStatus === 1 && (
                    <View
                      className="join-more dark"
                      onClick={() => queryQrCode(item.orderId)}
                    >
                      <Button className="join-detail">活动二维码</Button>
                    </View>
                  )}
                  {item.activityLeader&&item.activityStatus!==3 && (
                    <View
                      className="join-more dark"
                      onClick={() => activityClick()}
                    >
                      <Button className="join-detail">扫码核销</Button>
                    </View>
                  )}
                  {item.activityStatus===3 && (
                    <View
                      className="join-more dark"
                      onClick={() => reviewClick(item.activityId)}
                    >
                      <Button className="join-detail">活动回顾</Button>
                    </View>
                  )}
                </View>
              )}
              {list && (
                <View className="join-more">
                  <Button className="join-detail">查看详情</Button>
                </View>
              )}
            </View>
          </View>
        );
      })}
    </View>
  );
};

export default observer(MineItem);
